<template>
    <div class="page">
        <div class="content">
            <div class="input-box">
                <div class="title">注册</div>
            </div>

            <div class="input-box  m-t-25">
                <div>
                    <span class="requried">*</span>
                    <span>姓名：</span>
                </div>
                <input type="text" placeholder="请输入联系人" v-model="form.name" />
            </div>
            <div class="input-box">
                <div>
                    <span class="requried">*</span>
                    <span>手机号码：</span>
                </div>
                <input type="text" placeholder="请输入联系电话" v-model="form.mobile" />
            </div>
            <div class="input-box">
                <div>
                    <span class="requried">*</span>
                    <span>验证码：</span>
                </div>
                <input type="text"  class="smsCode"  placeholder="请输入验证码" v-model="form.sms_code" />
                <button  class="smsCodeBtn" @click="sendCode()" v-if="timeOut<1">获取验证码</button>
                <button  class="smsCodeBtn"  v-if="timeOut>0">{{timeOut}}s</button>
            </div>
            <div class="input-box">
                <div>
                    <span class="requried">*</span>
                    <span>密码：</span>
                </div>
                <input  type="password" placeholder="请输入密码" v-model="form.password" />
            </div>
            <div class="input-box">
                <div>
                    <span class="requried">*</span>
                    <span>确认密码：</span>
                </div>
                <input  type="password" placeholder="请输入密码" v-model="form.password_confirm" />
            </div>
            <div class="terms-box">
                <div class="w-520">
                    <span class="terms-check" @click="is_agree = !is_agree">
                      <img v-if="is_agree" src="@/static/engineering5188/common/check1.png" alt="">
                      <img v-else src="@/static/common/check0.png" alt="">
                      我已阅读并同意
                    </span>
                    <span class="terms-text" @click="$router.push('/serviceTerms')">《服务条款》和</span>
                    <span class="terms-text" @click="$router.push('/privacy')">《隐私政策》</span>
                </div>
            </div>
            <div class="terms-box">
                <div class="w-520 flex-align-center">
                    <div class="btn-box"> 
                        <button  @click="submit()">注  册</button>
                    </div>
                    <div class="register-box">
                      <span> <router-link to="/businessPersonnelLogin">已有账号，直接登录</router-link> </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </template>

 <script>
export default {
  components: {

  },
  props: [],
  data() {
    return {
        form: {
            name:'',
            mobile: "",
            sms_code: "",
            password:'',
            password_confirm:"",
        },
        is_agree: true,
        timeOut: 0,
    };
  },
  computed: {

  },
  watch: {},

  created() {
  },

  methods: {
    sendCode(){
        if(this.form.mobile.trim().length != 11){
            alertErr("请输入正确的手机号");
            return;
        }
        this.$httpApi("/api/send", {
            mobile: this.form.mobile,
            scene_type: 1
        }, "post").then(res =>{
            if(res.code == 200){
                alertSucc("发送成功");
                this.timeOut = 60;
                this.timer = setInterval(() => {
                    this.timeOut--;
                    if (this.timeOut <= 0) {
                        clearInterval(this.timer);
                    }
                }, 1000);
            }else{
                alertErr(res.msg);
            }
        })
    },
    submit(){
        if(this.form.name.trim().length == 0){
            alertErr("请输入姓名");
            return;
        }
        if(this.form.mobile.trim().length != 11){
            alertErr("请输入正确的手机号");
            return;
        }   
        if(this.form.sms_code.trim().length == 0){
            alertErr("请输入验证码");
            return;
        }  
        if(this.form.password.trim().length == 0){
            alertErr("请输入密码");
            return;
        }   
        if(this.form.password_confirm.trim().length == 0){
            alertErr("请输入确认密码");
            return;
        }   
        if(this.form.password != this.form.password_confirm){
            alertErr("两次密码不一致");
            return;
        }
        this.$httpApi("/api/userRegister", {
            ...this.form,
        }, "post").then(res =>{
            if(res.code == 200){
                alertSucc("注册成功");
                this.$store.commit("set_baseInfo", res.data);
                this.$store.dispatch("getUserloginedInfo");
                this.$router.push("/businessPersonnel/userInfo");
            }else{
                alertErr(res.msg);
            }
        })
        
    }
  },
};
</script>
<style scoped lang="less">
    .page{
        width:100%;
        background: #F6F6F6;

        .content{
            padding-top:89px;
            margin-left:auto;
            margin-right:auto;
            width:710px;
            height:790px;

            .title{
                width: 520px;
                font-weight: bold;
                font-size: 36px;
                color: #000000;
                text-align: center;
            }

            .m-t-25{
                margin-top:25px;
            }

            .input-box{
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 20px;

                span {
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                }

                .requried{
                    color: #FF0000;
                }

                input {
                    margin-left: 15px;
                    width: 520px;
                    background: #FFFFFF;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #E6E5E5;
                    height: 100%;
                    padding-left: 16px;
                    font-size: 14px;
                    color: #000;
  
                    &::-webkit-input-placeholder {
                      font-size: 14px;
                      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                      font-weight: 400;
                      color: #D7D7D7;
                    }
                }
                .smsCode{
                    width: 382px;
                }
                .smsCodeBtn{
                    width: 128px;
                    height: 44px;
                    margin-left: 10px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #666666;
                    text-align: center;
                    background: #FFFFFF;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #E6E5E5;
                }
            }
            
            .terms-box{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 20px;
            }
            .w-520{
                width:520px;
                line-height:18px;
            }
            .terms-check {
              cursor: pointer;
              font-family: OPPOSans, OPPOSans;
              font-weight: 400;
              font-size: 12px;
              color: #999999;

              img {
                margin-right: 10px;
                width: 18px;
                height: 18px;
              }
            }
            .terms-text {
              cursor: pointer;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 12px;
              color: #2B523B;

              &:hover {
                color: #4CA5E4;
              }
            }

            .btn-box {
              margin-top: 257x;

              button {
                width: 320px;
                height: 44px;
                background: #31A41B;
                border-radius: 4px 4px 4px 4px;
                font-size: 18px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                color: #ffffff;
              }
            }

            .register-box {
              text-align: center;
              font-size: 14px;
              margin-left:18px;

              a {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 24px;
                color: #31A41B;
                border-bottom: 1px solid #31A41B;
              }
            }

            .flex-align-center {
              display: flex;
              align-items: center;
            }
            
        }
    }
</style>